<template>
  <div class="preview" ref="preview" style="display: flex;width: 1380px;flex-wrap: wrap;padding: 0 0 25px;">
    <div class="facility-box" v-for="item in  state.uaData" :key="item.id" :id="'facility-'+item.platform">
      <img :src="item.imgSrc">
      <div class="iframe-box">
<!--        <a-spin />-->
        <iframe @load="state.iscomplete = false" :src="item.iframeSrc"></iframe>
      </div>
      <div class="mask-img">
        <a-button type="primary" shape="round" :size="size" @click="selectUa(item)">
          选择UA
        </a-button>
      </div>
      <div class="mask-del" v-show="props.delMaskLayer" @click="item.delImg = !item.delImg">
        <img  :src="item.delImg?item.delImgY:item.delImgN">
      </div>
      <div class="facility-box-ua">
        <span style="font-size: 14px;color: #FFFFFF;float: left">{{item.showUa}}</span>
<!--        state.bigUa = item.ua;-->
        <span style="float: right" @click="state.model = item.platform;state.showUaId = item.id; classifyOptions()"><img src="../assets/img/preview-img/fd.png"></span>
      </div>
    </div>

<!--    放大遮罩框-->
    <!--    遮罩框-->
    <div class="pop-up-pc" v-if="state.isPopUp">
      <!--      切换设备-->
      <div id="select-fd" style="position:relative;">
<!--        :defaultData="state.updateDefaultUa"-->
        <a-cascader  popupClassName="update-select" size="small" :getPopupContainer="selectId"  @change="uasss" :field-names="{ value: 'id' }"  v-model:value="state.defaultData"  :options="state.modelOptions" placeholder="请选择" />
      </div>
      <!--      关闭弹框-->
      <div class="close-pop-up" @click="state.isPopUp = false">
        <img src="../assets/img/preview-img/clones.png">
      </div>

      <div :class="'client-side-'+state.model">
        <a-spin class="complete" v-if="state.iscomplete" />
        <!--        @load="state.iscomplete = false"-->
        <iframe @load="state.iscomplete = false" :src="`${baseUrl}/preview.php?url=${urlData.searchUrl}&ua=${state.bigUa}`" frameborder="0"></iframe>
      </div>
    </div>
<!--    添加-->
    <div v-if="state.uaData.length < 6">
    <div class="add-facility-box" v-if="!props.delMaskLayer" @click="showModal">
      <div>
        <img src="../assets/img/preview-img/tianjia.png">
        <div style="font-size: 21px;font-weight: 500; color: #CCCCCC; margin-top: 20px;text-align: center;">添加</div>
      </div>
    </div>
    </div>

<!--    添加弹框开始-->
<!--    v-if="state.uaData.length >= 6"-->
    <div class="add-visible" ref="replayModal">
<!--      display-area-->
      <a-modal width="580px" :getContainer="()=> $refs.preview" :zIndex="1001" wrapClassName="select-ua-modal" body-style="height: 200px;padding: 72px 50px;" v-model:visible="state.visible" title="添加UA" @ok="addHander" okText='确认' cancelText='取消' centered>
        <div id="add-cascader" style="position:relative;">
<!--          <span>型号:</span>-->
<!--          :getPopupContainer="getId" defaultValue="电脑windows谷歌浏览器']" -->
          <a-cascader  :defaultValue="['pc','Windows','谷歌浏览器']" :getPopupContainer="getId"   size="large" popupClassName="update-cascader" @change="addCascader" v-model:value="addUaValue" :options="options" placeholder="请选择UA" />
        </div>
      </a-modal>
    </div>

<!--    UA选择切换-->
    <div>
      <a-modal width="580px" :getContainer="()=> $refs.preview" :zIndex="1001" wrapClassName="select-ua-modal" body-style="height: 200px;padding: 72px 50px;" v-model:visible="state.visibleCut" title="选择UA" @ok="cutHander" okText='确认' cancelText='取消' centered>
        <div id="edit-cascader" style="position:relative;">
<!--          :defaultValue="state.updateDefaultUa"-->
        <a-cascader  :getPopupContainer="updateId"  @change="cutCascader" popupClassName="edit-cascader" v-model:value="state.updateDefaultUa" :options="options" placeholder="请选择UA" />
        </div>

      </a-modal>
    </div>
  </div>

</template>

<script setup>
import { baseUrl, pagePreview } from '@/axios/index.js'
import { useRoute,onBeforeRouteUpdate  } from 'vue-router'
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
const route = useRoute()
import {reactive, getCurrentInstance,createVNode} from 'vue'
const emit = defineEmits(['changeDelMaskLayer'])
const {proxy}=getCurrentInstance()
const props = defineProps({

  region: {
    type: Array,
    default: null
  },
  isTrue: {
    type: Boolean,
    default: true
  },
  delMaskLayer: {
    type: Boolean,
    default: true
  },
  options: {
    type: Array,
    default: []
  },

})
const urlData = reactive({
  searchUrl:route.query.url?route.query.url:null,
})



const state = reactive({

  uaData:[
    {
      id:1,
      imgSrc:require('@/assets/img/preview-img/pc.png'),
      delImgN:require('@/assets/img/preview-img/dui-writes.png'),
      delImgY:require('@/assets/img/preview-img/dui-blues.png'),
      delImg:false,
      iframeSrc:`http://zhuli.test.checkurl.cn/preview.php?url=${urlData.searchUrl}&ua=16`,
      ua:'16',
      platform:'pc',
      showUa:'电脑_Windows_谷歌浏览器'
    },
    {
      id:2,
      imgSrc:require('@/assets/img/preview-img/ipad.png'),
      delImgN:require('@/assets/img/preview-img/dui-writes.png'),
      delImgY:require('@/assets/img/preview-img/dui-blues.png'),
      delImg:false,
      iframeSrc:`http://zhuli.test.checkurl.cn/preview.php?url=${urlData.searchUrl}&ua=54`,
      platform:'ipad',
      ua:'54',
      showUa:'平板_安卓_华为MatePadPro-华为浏览器'
    },
    {
      id:3,
      imgSrc:require('@/assets/img/preview-img/mobile.png'),
      delImgN:require('@/assets/img/preview-img/dui-writes.png'),
      delImgY:require('@/assets/img/preview-img/dui-blues.png'),
      delImg:false,
      iframeSrc:`http://zhuli.test.checkurl.cn/preview.php?url=${urlData.searchUrl}&ua=13`,
      platform:'mobile',
      ua:'13',
      showUa:'手机_安卓_QQ浏览器'
    }
  ],
  isPopUp:false,
  model:null,
  bigUa:null,
  visible:false,
  addUaValue:'',
  addPlatform:'',
  newUaLabel:'',
  modelOptions:[],
  defaultData: [],
  showUaId:null,
  visibleCut:false,
  cutUaValue:'',
  cutUaId:null,
  cutSelectValue:'',
  cutSelectId:null,
  cuttype:[],
  updateDefaultUa:null,
  updateDefaultId:null,
  isPcState:true,
  isIpadState:true,
  isMobileState:true


})

//在setup中
onBeforeRouteUpdate((to) => {
  urlData.searchUrl = to.query.url
  console.log(to.query.url, "=====");
});

const uasss =(value, type)=>{
  console.log(value, type)
  state.uaData.forEach(item=>{
    if(state.showUaId === item.id){
      item.showUa = type.map(t=>t.label).join('_')
      item.updateDeftUa = type.map(t=>t.value)
    }
  })

  state.updateDefaultUa = type.map(t=>{
    switch(type[0].value) {
      case 'pc':
        state.isPcState = false
        return t.value
      case 'phone':
        state.isMobileState = false
        return t.value
      case 'flat':
        state.isIpadState =false
        return t.value
    }
  })
  console.log(state.updateDefaultUa)
  state.bigUa=type[type.length-1].id
}

const classifyOptions=()=>{
  state.isPopUp = true;

  switch(state.model) {
    case 'pc':
      state.defaultData = state.isPcState?[1, 14, 16]:state.defaultData
      state.modelOptions = props.options.filter(item=>{
        return item.value ==='pc'
      })
      state.cutSelectId?state.cutSelectId:state.bigUa = 16
      break;
    case 'mobile':
      state.defaultData = state.isMobileState?[ 2,10, 13]:state.defaultData
      state.modelOptions = props.options.filter(item=>{
        return item.value ==='phone'
      })
      state.cutSelectId?state.cutSelectId:state.bigUa = 13
      break;
    case 'ipad':
      state.defaultData = state.isIpadState?[ 3, 18,54]:state.defaultData
      state.modelOptions = props.options.filter(item=>{
        return item.value ==='flat'
      })
      state.cutSelectId?state.cutSelectId:state.bigUa = 54
      break;
  }

}

const selectUa=(item)=> {
  console.log(item)
  state.visibleCut = true;
  state.cutUaId = item.id;
  switch (item.platform) {
    case 'pc':
      state.updateDefaultUa = state.isPcState ? ['pc', 'Windows', '谷歌浏览器'] : state.updateDefaultUa
      break;
    case 'ipad':
      state.updateDefaultUa = state.isIpadState ? ['flat', '1', 'MatePad-Huaweibrowser'] : state.updateDefaultUa
      break;
    case 'mobile':
      state.updateDefaultUa = state.isMobileState ? ['phone', '1', 'QQBrowser'] : state.updateDefaultUa
      break;
  }
}

//删除UA
const delUa = ()=>{
  if(state.uaData.filter(item =>item.delImg).length <=0) return false
  emit('changeMaskLayer')
  Modal.confirm({
    title: '删除预览',
    okText:'确定',
    cancelText:'取消',
    centered: true,
    icon: createVNode(ExclamationCircleOutlined),
    content: '确认删除选中预览吗？',

    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 200);
        state.uaData = state.uaData.filter(item =>!item.delImg)
        emit('changeDelMaskLayer')
      }).catch(() => console.log('Oops errors!'));

    },

    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onCancel() {},

  });

}

//取消删除  删除记号恢复
const cancelPreDel=()=>{
  state.uaData.forEach(item =>item.delImg =false)
}

defineExpose({ delUa,cancelPreDel })

const cutHander =()=>{

  if(!state.cutSelectValue)return proxy.$message.error('请选择UA')
  switch(state.cutSelectValue) {
    case 'pc':
      state.uaData.forEach(item=>{
        if(item.id ===state.cutUaId){
          item.imgSrc = require('@/assets/img/preview-img/pc.png')
          item.platform = 'pc'
          item.iframeSrc = `http://zhuli.test.checkurl.cn/preview.php?url=${urlData.searchUrl}&ua=${state.cutSelectId}`
          item.showUa = state.cuttype.map(t=>t.label).join('_')
        }
      })
      state.isPcState = false
      state.defaultData = state.updateDefaultId
      break;
    case 'phone':
      state.uaData.forEach(item=>{
        if(item.id ===state.cutUaId){
          item.imgSrc = require('@/assets/img/preview-img/mobile.png')
          item.platform = 'mobile'
          item.iframeSrc = `http://zhuli.test.checkurl.cn/preview.php?url=${urlData.searchUrl}&ua=${state.cutSelectId}`
          item.showUa = state.cuttype.map(t=>t.label).join('_')
        }
      })
      state.isMobileState = false
      state.defaultData = state.updateDefaultId
      break;
    case 'flat':
      state.uaData.forEach(item=>{
        if(item.id ===state.cutUaId){
          item.imgSrc = require('@/assets/img/preview-img/ipad.png')
          item.platform = 'ipad'
          item.iframeSrc = `http://zhuli.test.checkurl.cn/preview.php?url=${urlData.searchUrl}&ua=${state.cutSelectId}`
          item.showUa = state.cuttype.map(t=>t.label).join('_')
        }
      })
      state.isIpadState = false
      state.defaultData = state.updateDefaultId
      break;
  }
  state.visibleCut = false
  state.bigUa = state.cutSelectId
}

const cutCascader=(value,type)=>{
  state.updateDefaultId = type.map(t=>t.id)
  state.cutSelectValue = value[0]
  state.cutSelectId = type[type.length-1].id
  state.cuttype = type

}

const showModal = ()=>{
  state.visible = true
}



const addCascader =(value,type)=>{
 state.addUaValue=type[type.length-1].id
  state.newUaLabel = type.map(item =>item.label).join('_')

  switch(value[0]) {
    case 'pc':
      state.addPlatform = 'pc'
      break;
    case 'phone':
      state.addPlatform = 'mobile'
      break;
    case 'flat':
      state.addPlatform = 'ipad'
      break;
  }
}

//添加UA
const addHander =()=>{
  state.addPlatform?state.addPlatform:state.addPlatform ='pc'
  // console.log(state.addPlatform)
  // if(state.uaData.length >= 6 )return proxy.$message.error('无法添加，最多只能有6种UA')
  // console.log(state.addPlatform)
  state.uaData.push(
      {
        id:Math.random().toString(36).substr(-10),
        imgSrc:require('@/assets/img/preview-img/'+state.addPlatform+'.png'),
        delImgN:require('@/assets/img/preview-img/dui-writes.png'),
        delImgY:require('@/assets/img/preview-img/dui-blues.png'),
        delImg:false,
        iframeSrc:`http://zhuli.test.checkurl.cn/preview.php?url=${urlData.searchUrl}&ua=${state.addUaValue}`,
        platform:state.addPlatform,
        ua:state.addUaValue,
        showUa:state.newUaLabel
      }
  )
  state.addUaValue = ''
  state.addPlatform = ''
  state.visible = false
}

const getId=()=>{
  return document.getElementById('add-cascader')
}

const updateId=()=>{
  return document.getElementById('edit-cascader')
}

const selectId=()=>{
  return document.getElementById('select-fd')
}



</script>

<style lang="less" scoped>

.facility-box:before{
  transition: all 0.4s linear;
}
.facility-box{
  width: 432px;
  margin:20px 20px 0 0;
  justify-content: center;
  position: relative;
  cursor: pointer;

  img{
    width: 100%;
  }

  .facility-box-ua{
    position: absolute;
    top: 20px;
    width: 100%;
    padding: 0 20px;

    img{
      width: 32px;
      height: 32px;
    }
  }

  .mask-img{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
    transition: all 0.4s linear;
    border-radius: 8px 8px 8px 8px;

    /deep/ .ant-btn{
      position: absolute;
      bottom: 70px;
      right: 44px;
      width: 336px;
      height: 40px;
    }
  }

  .mask-img:hover {
    opacity: 1;
    cursor: default;
    transform: translateZ(-50%) scale(1);
    background: linear-gradient(
        201deg
        , rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 173%);

  }

  .mask-del{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 1;
    transition: all 0.4s linear;
    border-radius: 8px 8px 8px 8px;

    img{
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
    }
  }


}


#facility-pc {
  .iframe-box{
    position: absolute;
    height: 468px;
    width: 290px;
    top: 42%;
    left: 51%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
  }

  iframe {
    position: absolute;
    top: -305px;
    left: -816px;
    width: 1920px;
    height: 1080px;
    transform: scale(0.176, 0.2);
  }
}
#facility-ipad {
    .iframe-box {
      width: 169px;
      height: 343px;
      background-size: 100% 100%;
      transform: scale(2.5) translateX(-20%);
      position: absolute;
      top: 32%;
      left: 50%;
    }
  iframe {
    position: absolute;
    top: -362px;
    left: -301px;
    width: 768px;
    height: 1024px;
    background-color: #fff;
    transform: scale(0.13, 0.13);
  }
}

#facility-mobile {
  .iframe-box {
    width: 290px;
    height: 343px;
    //transform: scale(2.5) translateX(-20%);
    position: absolute;
    top: 32%;
    left: 17%;
  }
  iframe {
    position: absolute;
    top: -245px;
    left: -61px;
    width: 414px;
    height: 736px;
    background-color: #fff;
    transform: scale(0.52, 0.629);
    border-radius: 51px;
    border: 0px;
  }
}

.add-facility-box{
  width: 432px;
  height:568px;
  background: #F7F7F7;
  border-radius: 8px;
  border: 1px dashed #c7c7c7;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.pop-up-pc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 9999;
  &::-webkit-scrollbar{
    width: 0!important;
  }
  #select-fd {
    margin: 74px 0px 0px 225px;
    background-color: #F7F7F7;
    border-radius: 18px;
    width: 303px;
    padding: 0 15px;
    color: #FFFFFF;
    font-size: 15px;

    /deep/ .ant-cascader-picker {
      background-color: #F7F7F7;
    }
  }

  .close-pop-up {
    position: absolute;
    top: 57px;
    right: 193px;
    cursor: pointer;
    z-index: 999999;
    font-size: 30px;
    color: #ffffff;

    img {
      width: 35px;
      height: 35px;
    }
  }

  .complete {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 9999999;
    transform: translate(-50%, -50%);
  }

  .client-side-pc {
    width: 506px;
    height: 403px;
    background-size: 100% 100%;
    transform: scale(2.5) translateX(-20%);
    position: absolute;
    top: 47%;
    left: 52%;

    iframe {
      position: absolute;
      top: -385px;
      left: -706px;
      width: 1920px;
      height: 1080px;
      transform: scale(0.255, 0.27);
      background-color: #fff;
    }
  }

  .client-side-ipad {
    width: 290px;
    height: 343px;
    background-size: 100% 100%;
    transform: scale(2.5) translateX(-20%);
    position: absolute;
    top: 32%;
    left: 50%;

    iframe {
      position: absolute;
      top: -321px;
      left: -240px;
      width: 768px;
      height: 1024px;
      transform: scale(0.34, 0.28);
      background-color: #fff;
    }
  }

  .client-side-mobile {
    width: 210px;
    height: 350px;
    background-size: 100% 100%;
    transform: scale(2.5) translateX(-20%);
    position: absolute;
    top: 34%;
    left: 50%;

    iframe {
      position: absolute;
      top: -178px;
      left: -102px;
      width: 414px;
      height: 736px;
      transform: scale(0.4, 0.41);
      background-color: #fff;
    }
  }
}


</style>

<style lang="less">
.ant-modal-root {
  .select-ua-modal{
    .ant-modal{
      border-radius: 4px;
      overflow: hidden;
      .ant-modal-content{
        .ant-modal-header {
          border-bottom: none;

          .ant-modal-title {
            color: @primary;
            font-size: 18px;
            font-weight: 500;
          }
        }
        .ant-modal-body{
          border-radius: 4px;
          padding: 40px 15px 15px 70px;
          .ant-upload-picture-card-wrapper{
            display: flex;
            justify-content: center;
            .ant-upload{
              color: @sub-title;
            }
          }
          .upload-tips{
            text-align: center;
            color: @content;
            p{
              margin-bottom: 5px;
            }
          }
        }

        .ant-modal-footer{
          border-top:0px;
        }
        .ant-form {
          .ant-form-item {
            .ant-form-item-control {
              .ant-form-item-control-input {
                .ant-form-item-control-input-content {
                  .code-input-box{
                    .getting-code{
                      margin-left: 15px;
                    }
                  }
                }
              }
            }
          }

          .form-btn-group {
            .ant-form-item-control {
              .ant-form-item-control-input {
                .ant-form-item-control-input-content {
                  display: flex;
                  justify-content: space-between;

                  .ant-btn {
                    height: 40px;
                    width: 160px;
                    border-radius: 4px;
                  }
                }
              }
            }
          }
          .step-complete{
            text-align: center;
            img{
              margin-bottom: 10px;
            }
            .ant-btn{
              height: 40px;
              width: 100%;
            }
          }
        }
      }
    }
  }
}

.update-cascader{
  left: -5px !important;
  top: -73px !important;
  box-shadow: 0 0px 0px #ccc;

  .ant-cascader-menu{
    min-width: 144px !important;
    height: 190px !important;
  }
}

.edit-cascader{
  left: -5px !important;
  top: -73px !important;
  box-shadow: 0 0px 0px #ccc;

  .ant-cascader-menu{
    min-width: 144px !important;
    height: 190px !important;
  }
}

#add-cascader{
   .ant-cascader-picker {
    width: 398px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 18px !important;
    padding: 6px 0 !important;
  }
}

#edit-cascader{
  .ant-cascader-picker {
    width: 398px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 18px !important;
    padding: 6px 0 !important;
  }
}

.update-select{
  left: 38px !important;
  top: 33px !important;
  color:#333333;

  .ant-cascader-menu{
    min-width: 144px !important;
    height: 190px !important;
  }
}


</style>
